TreeGrid Cells Tutorial
11. Dynamic column and row spanning
Let users to span and split cells by mouse dragging
Select cell ranges by mouse dragging and right click to span the range.
Press mouse middle button to split the cell under mouse.
You can select and span cells directly by dragging by right mouse button.
You can span and split selected cells also by clicking to toolbar buttons Split and Join.
You can span rows also on different tree levels. When spanned parent row through its children, the children are always spanned all.
You can test here deleting spanned rows, adding rows to spanned range, moving rows between, into and out the spanned ranges (by mouse dragging with Ctrl key held).
Hiding, showing and moving columns with spanned cells.
Also sorting, filtering and grouping the spanned rows.
And finally editing in the spanned cells.
-
Set <Cfg
DynamicSpan
='1' to prepare TreeGrid for dynamic cell spanning.
It shows the Split and Join buttons on Toolbar and saves changes in span to Undo if permitted.
-
Set <Cfg
SelectingCells
='1' to permit selection of individual cells and cell ranges.
-
Set <Actions OnDragCell="SelectCells" to select cells by mouse dragging.
If you want to still support dragging and moving rows, you can permit it for example with Ctrl key held, by <Actions OnCtrlDragCell="DragRow"/>.
-
Attach actions SpanSelected, SplitSelected and SplitCell to appropriate events like OnDropCell, OnClickCell, OnMouseDown, OnRightClick and so on to previde given behavior.
-
To clear selection after some action, add ClearSelection action,
for example <Actions OnClickCell="ClearSelection,FocusEdit" OnClickOutside="ClearSelection,Blur"/> clears the selection after any focus change.
-
API
You can dynamically span and split the cells by API methods SpanRange and SplitSpanned.
-
Upload span changes
-
By <bdo Upload_Type with Span keyword you can upload only spanned rows, with appropriate RowSpan and Span attributes, in special <Spanned> tag.
-
By <bdo Upload_Flags with Spanned keyword and Upload_Type with Changes keyword will upload the changes in span along with other changes in grid, in <Changes> tag.
-
IE8 strict mode has problems with rowSpan HTML attribute, so when using RowSpan switch IE8 to quirks mode (no !DOCTYPE) or to IE7 compatibility mode.